<template>
  <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <slot name="title"> 修改备注 </slot>
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <template v-if="step === 0">
            <textarea
              class="form-control"
              rows="12"
              v-model.trim="pnrDetail"
              placeholder="请将编码内容粘帖到此处"
            ></textarea>

            <button
              type="button"
              class="btn btn-primary btn-sm mt-1"
              @click.stop="createFlightOrder()"
            >
              <template v-if="pnrMode === 0"> 导入编码内容 </template>
              <template v-else-if="pnrMode === 1"> 导入编码 </template>
            </button>
          </template>
          <template v-else>
            <form role="form" class="form-horizontal">
              <div class="row mb-2">
                <label class="col-3 col-form-label">乘机人</label>
                <div class="col-9">
                  <select class="form-select" v-model.number="psgId">
                    <option value="0">请选择乘机人</option>
                    <template v-if="detail !== null">
                      <template v-for="psg in detail.passengers">
                        <option :value="psg.id">{{ psg.name }}</option>
                      </template>
                    </template>
                  </select>
                </div>
              </div>
              <div class="row mb-2">
                <label class="col-3 col-form-label">格式</label>
                <div class="col-9">
                  <select class="form-select" v-model.number="smsFormat">
                    <option value="0">格式1</option>
                    <template v-if="username !== 'demo'">
                      <option value="1">格式2</option>
                      <option value="2">格式3</option>
                      <option value="3">格式4</option>
                      <option value="4">格式5</option>
                    </template>
                  </select>
                </div>
              </div>
              <div class="row mb-2">
                <div class="col-12">
                  <label class="small">
                    内容：
                    <span class="text-info" v-if="loading">(获取中......)</span>
                  </label>
                  <textarea
                    class="form-control"
                    rows="5"
                    v-model="smsContent"
                  ></textarea>
                </div>
              </div>
              <div class="row mb-2">
                <div class="col-12">
                  <input
                    type="text"
                    class="form-control"
                    v-model.trim="mobile"
                    placeholder="请在此输入接收信息的手机号"
                  />
                  <span class="small text-muted"
                    >请输入手机号（留空则使用订单中对应乘机人的手机号）</span
                  >
                </div>
              </div>
            </form>
          </template>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-primary ms-auto me-auto"
            @click.stop="sendSms()"
            v-if="step === 1"
          >
            发送
          </button>
          <button
            type="button"
            class="btn btn-secondary me-2"
            data-bs-dismiss="modal"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { getOrderSmsContent, sendFlightOrderSms } from "@/api/sms";
import { ORDER_FLIGHT } from "@/common/const";
import { createFlightOrderByPnr, searchFlightOrderDetail } from "@/api/flight";

export default {
  props: {
    orderType: {
      type: String,
      default: ORDER_FLIGHT,
    },
  },
  data() {
    return {
      resolve: "",
      reject: "",
      promise: "",

      step: 0,
      pnrMode: 0,
      pnrDetail: "",
      orderId: 0,
      psgId: 0,
      mobile: "",
      smsContent: "",
      smsFormat: 0,

      detail: null,

      loading: false,

      myModal: null,
    };
  },
  computed: {
    username() {
      return this.$store.state.username;
    },
  },
  watch: {
    smsFormat: function (newVal) {
      this.searchSmsContent();
    },
    psgId: function () {
      this.searchSmsContent();
    },
  },
  methods: {
    modal: function () {
      this.showModal();

      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise;
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchSmsContent: function () {
      this.loading = true;
      const params = {
        orderType: this.orderType,
        orderId: this.orderId,
        psgId: this.psgId,
        smsFormat: this.smsFormat,
      };
      getOrderSmsContent(
        params,
        (v) => {
          if (v.status === "OK") {
            this.smsContent = v.desc;
          } else {
            this.smsContent = v.errmsg;
          }
        },
        () => {
          this.loading = false;
        }
      );
    },
    createFlightOrder: function () {
      const params = {
        pnrDetail: this.pnrDetail,
      };

      createFlightOrderByPnr(params, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg, "danger");
        } else {
          this.showErrMsg("分析并保存成功");
          this.orderId = v.returnCode;
          this.step = 1;
          this.searchOrderDetail();
        }
      });
    },
    searchOrderDetail: function () {
      searchFlightOrderDetail(this.orderId, (v) => {
        if (v.errcode === 0) {
          this.detail = v;
        } else {
          this.showErrMsg(v.errcode + ": " + v.errmsg);
        }
      });
    },
    sendSms: function () {
      sendFlightOrderSms(
        this.orderId,
        {
          psgId: this.psgId,
          mobileNo: this.mobile,
          smsFormat: this.smsFormat,
        },
        (v) => {
          this.commonShowMessage(v);
        }
      );
    },
    commonShowMessage: function (v) {
      if (v.status !== "OK") {
        this.showErrMsg("失败：" + v.errmsg, "danger");
      } else {
        if (v.desc !== "") {
          this.showErrMsg(v.desc);
        } else {
          this.showErrMsg("操作成功");
        }
      }
    },
    showModal: function () {
      this.getMyModal().show();
    },
    hideModal: function () {
      this.getMyModal().hide();
    },
    getMyModal: function () {
      if (this.myModal === null) {
        let myModalEl = $(this.$el).get(0);
        this.myModal = new bootstrap.Modal(myModalEl);
      }

      return this.myModal;
    },
  },
};
</script>
